import { reactive } from 'vue';

export const useData = () => {
  const formSchema = reactive([
    {
      title: '详情示例一',
      itemList: [
        {
          label: '电脑',
          dictCode: 'computer',
          col: 6,
        },
        {
          label: '书籍',
          dictCode: 'book',
          col: 6,
        },
        {
          label: 'span12',
          dictCode: 'span12',
          col: 12,
        },
        {
          label: 'label插槽',
          dictCode: 'labelSlot',
          col: 6,
          valueSlot: 'labelSlot',
        },
        {
          label: 'value插槽',
          dictCode: 'valueSlot',
          col: 6,
          valueSlot: 'valueSlot',
        },
      ],
    },
    {
      title: '详情示例二',
      showExpand: true,
      itemList: [
        {
          label: '金额',
          dictCode: 'amount',
          type: 'amount',
          col: 6,
        },
        {
          label: '空白数据',
          dictCode: 'dataform',
          col: 6,
        },
        {
          label: 'label颜色',
          dictCode: 'labelColor',
          labelColor: 'red',
          col: 6,
        },
        {
          label: 'value颜色',
          dictCode: 'valueColor',
          valueColor: '#284E80',
          col: 6,
        },
        {
          label: '隐藏部分',
          dictCode: 'hide',
          col: 6,
          hidden: true,
        },
      ],
    },
  ]);

  const dataSource = reactive({
    computer: '华为',
    book: '忏悔录',
    span12: '这是一段超长的内容这是一段超长的内容这是一段超长的内容',
    amount: 12345678,
    labelColor: 'label颜色',
    valueColor: 'value颜色',
    hide: '隐藏部分',
  });

  return {
    formSchema,
    dataSource,
  };
};
